<!-- templates/index.html - 添加进度显示的前端 -->
<!DOCTYPE html>
<html>
<head>
    <title>文件管理系统 - 带进度显示</title>
    <style>
        /* 新增进度条样式 */
        .progress-container {
            margin: 15px 0;
            width: 100%;
            background-color: #f1f1f1;
            border-radius: 4px;
            display: none;
        }
        .progress-bar {
            height: 24px;
            background-color: #4CAF50;
            border-radius: 4px;
            text-align: center;
            line-height: 24px;
            color: white;
            width: 0%;
            transition: width 0.3s ease;
        }
        .progress-text {
            margin-top: 5px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <h1>文件管理系统</h1>
    
    <!-- 文件上传表单 -->
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file" id="file-input" required>
        <button type="button" id="upload-btn">上传文件</button>
    </form>

    <!-- 进度显示区域 -->
    <div class="progress-container" id="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
        <div class="progress-text" id="progress-text">0%</div>
    </div>

    <!-- 文件列表 -->
    <div class="file-list">
        <h2>文件列表</h2>
        {% if files %}
            {% for file in files %}
            <div class="file-item">
                {{ file }}
                <span class="actions">
                    <a href="/download/{{ file }}"><button>下载</button></a>
                    <form action="/delete/{{ file }}" method="post" style="display:inline;">
                        <button type="submit">删除</button>
                    </form>
                </span>
            </div>
            {% endfor %}
        {% else %}
            <p>暂无文件</p>
        {% endif %}
    </div>

    <script>
        // 使用原生JavaScript(ES5)实现上传进度显示
        document.getElementById('upload-btn').addEventListener('click', function() {
            var fileInput = document.getElementById('file-input');
            var file = fileInput.files[0];
            
            if (!file) {
                alert('请选择文件');
                return;
            }
            
            var formData = new FormData();
            formData.append('file', file);
            
            var xhr = new XMLHttpRequest();
            
            // 显示进度容器
            var progressContainer = document.getElementById('progress-container');
            var progressBar = document.getElementById('progress-bar');
            var progressText = document.getElementById('progress-text');
            progressContainer.style.display = 'block';
            
            // 监听上传进度
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    progressBar.style.width = percentComplete + '%';
                    progressText.textContent = Math.round(percentComplete) + '%';
                }
            }, false);
            
            // 上传完成处理
            xhr.onload = function() {
                if (xhr.status === 200) {
                    alert('上传成功');
                    location.reload(); // 刷新页面更新文件列表
                } else {
                    alert('上传失败: ' + xhr.statusText);
                }
                progressContainer.style.display = 'none';
            };
            
            // 错误处理
            xhr.onerror = function() {
                alert('上传过程中发生错误');
                progressContainer.style.display = 'none';
            };
            
            xhr.open('POST', '/upload', true);
            xhr.send(formData);
        });
    </script>
</body>
</html>